{% extends 'base.html' %}
{% block title %}
    用户中心
{% endblock %}
{% block scrtpt %}
    {{ super() }}
    <script>
        $(document).ready(function () {
            $(".center-div").hide();
            $("#passwordUpdate").show();
        });

        function showDiv(id) {
            $(".center-div").hide();
            $(id).show();
        }
    </script>
{% endblock %}
{% block content %}
    <div class="col-md-5 col-md-offset-3">
        <div class="col-md-3"><input class="btn btn-primary" type="button" value="修改密码"
                                              onclick="showDiv('#passwordUpdate')"></div>
        <div class="col-md-3"><input class="btn btn-primary" type="button" value="修改头像"
                                              onclick="showDiv('#iconUpdate')"></div>
        <div class="col-md-3"><input class="btn btn-primary" type="button" value="修改手机号"
                                              onclick="showDiv('#phoneUpdate')"></div>
        <div class="col-md-3"><input class="btn btn-primary" type="button" value="修改邮箱"
                                              onclick="showDiv('#emailUpdate')"></div>
    </div>
    {#修改密码#}
    <div class="col-md-5 col-md-offset-3 center-div" id="passwordUpdate">
        <form action="{{ url_for('user.userUpdate') }}" method="post">
            <div class="form-group">
                {#隐藏的用户id#}
                <input type="hidden" name="id" value="{{ user[0] }}">
                {#隐藏的表字段#}
                <input type="hidden" name="columu" value="password">
                <label for="password" class="col-sm-2 control-label">修改密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="value" placeholder="请输入密码">
                </div>
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">更新密码</button>
                </div>
            </div>
        </form>
    </div>
    {#修改头像#}
    <div class="col-md-5 col-md-offset-3 center-div" id="iconUpdate">
        <form action="{{ url_for('user.userUpdate') }}" method="post" enctype="multipart/form-data">
            {#隐藏的用户id#}
            <input type="hidden" name="id" value="{{ user[0] }}">
            {#隐藏的表字段#}
            <input type="hidden" name="columu" value="icon">
            <div class="col-md-3 col-md-offset-3">
                <img class="img-circle" src="/static/image/upload/photo/{{ user[5] }}" width="260" height="260"
                     alt=""><br>
            </div>
            <div class="col-md-3 col-md-offset-3">
                <h3>{{ msg }}</h3><br>
                <label for="exampleInputFile">上传头像</label>
                <input type="file" id="exampleInputFile" name="icon">
                <button type="submit" class="btn btn-success">上传头像</button>
            </div>
        </form>
    </div>
    {#修改手机号#}
    <div class="col-md-5 col-md-offset-3 center-div" id="phoneUpdate">
        <form action="{{ url_for('user.userUpdate') }}" method="post">
            <div class="form-group">
                {#隐藏的用户id#}
                <input type="hidden" name="id" value="{{ user[0] }}">
                {#隐藏的表字段#}
                <input type="hidden" name="columu" value="phone">
                <label for="phone" class="col-sm-2 control-label">修改手机号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="phone" name="value" placeholder="请输入手机号">
                </div>
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">更新手机号</button>
                </div>
            </div>
        </form>
    </div>
    {#修改邮箱#}
    <div class="col-md-5 col-md-offset-3 center-div" id="emailUpdate">
        <form action="{{ url_for('user.userUpdate') }}" method="post">
            <div class="form-group">
                {#隐藏的用户id#}
                <input type="hidden" name="id" value="{{ user[0] }}">
                {#隐藏的表字段#}
                <input type="hidden" name="columu" value="email">
                <label for="email" class="col-sm-2 control-label">修改邮箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="email" name="value" placeholder="请输入邮箱">
                </div>
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">更新邮箱</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}